<template>
	<view class="wallet-page">
		<view class="balance-card">
			<view class="balance-info">
				<text class="balance-label">我的余额(元)</text>
				<text class="balance-amount">¥
					<text style="font-size: 80rpx;">{{ now_money }}</text>
				</text>
			</view>
			<view class="recharge-btn">
				<button type="primary" plain @click="recharge">充值</button>
			</view>
		</view>
		<view class="center">
			<picker mode="selector" @change="onTypeChange" :value="index" :range="typeArray">
				<view style="display: flex;align-items: center;">
					<text class="section-title">{{title}}</text>
					<uni-icons type="down" size="16" color="#666"></uni-icons>
				</view>
			</picker>
			<view class="filter-bar">
				<!-- <picker mode="date" @change="onTimeChange" :value="index" :range="array">
					<view style="display: flex;align-items: center;margin-right: 30rpx;">
						<text class="filter-label">时间筛选</text>
						<uni-icons type="down" size="16" color="#666"></uni-icons>
					</view>
				</picker> -->
				<picker mode="selector" @change="onSortChange" :value="index" :range="array" v-if="status == 0">
					<view style="display: flex;align-items: center;">
						<text class="filter-label">交易类型</text>
						<uni-icons type="down" size="16" color="#666"></uni-icons>
					</view>
				</picker>
				<picker mode="selector" @change="onFlowChange" :value="index" :range="flowArray" v-if="status == 1">
					<view style="display: flex;align-items: center;">
						<text class="filter-label">流水类型</text>
						<uni-icons type="down" size="16" color="#666"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
		<!-- 充值记录 -->
		<scroll-view scroll-y="true" class="printer-list" @scrolltolower="loadMore" v-if="status == 0">
			<view class="printer-item" v-for="(item, index) in recordList" :key="index">
				<view class="left">
					<view class="header">
						<view class="status" v-if="item.status == 1">未支付</view>
						<view class="status" v-if="item.status == 2">支付成功</view>
						<view class="status" v-if="item.status == 3">支付失败</view>
						<view class="status" v-if="item.status == 4">已取消</view>
						<text class="user-type" v-if="item.user_type == 0">个人账号</text>
						<text class="user-type" v-if="item.user_type == 1">商户账号</text>
						<text class="user-type" v-if="item.user_type == 2">门店账号</text>
					</view>
					<view class="orderId">关联订单号：{{item.order_no}}</view>
					<view class="time">交易时间：{{item.created_at}}</view>
				</view>
				<view class="right">
					￥{{item.amount / 100}}
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="isEmpty">
			<image src="/static/empty-icon.png" mode="widthFix"></image>
			<text>暂无数据，如有问题，请联系客服</text>
		</view>
		<!-- 钱包流水 -->
		<scroll-view scroll-y="true" class="printer-list" @scrolltolower="flowLoadMore" v-if="status == 1">
			<view class="printer-item" v-for="(item, index) in flowList" :key="index">
				<view class="left">
					<view class="header">
						<view class="status" v-if="item.type == 1">消费</view>
						<view class="status" v-if="item.type == 2">退款</view>
						<text class="user-type">冻结金额：{{item.freeze_amount / 100}}</text>
					</view>
					<view class="orderId">关联订单号：{{item.orderId}}</view>
					<view class="time">交易时间：{{item.created_at}}</view>
				</view>
				<view class="right">
					￥{{item.amount / 100}}
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="isFlowEmpty">
			<image src="/static/empty-icon.png" mode="widthFix"></image>
			<text>暂无数据，如有问题，请联系客服</text>
		</view>
	</view>
</template>

<script>
	import {
		getWalletFlowRecord,
		getRechargeRecord
	} from "@/api/userApi/user.js"
	import {
		getInfo
	} from "@/api/loginApi/login.js"
	export default {
		data() {
			return {
				isEmpty: false,
				isFlowEmpty: false,
				array: ['未支付', '支付成功', '支付失败', '已取消'],
				params: {
					page: 1,
					page_size: 5,
					status: '',
					order_no: '',
					transaction_id: ''
				},
				query: {
					page: 1,
					page_size: 5,
					orderId: '',
					type: ''
				},
				recordList: [],
				flowList: [],
				totalCount: 0,
				now_money: 0,
				typeArray: ['充值记录', '钱包流水'],
				flowArray: ['消费', '退款'],
				title: '充值记录',
				status: 0
			};
		},
		methods: {
			onTimeChange(e) {
				console.log(e);
			},
			onSortChange(e) {
				let index = e.detail.value
				if (index == 0) {
					this.params.status = 1
					this.getRechargeRecord()
				}
				if (index == 1) {
					this.params.status = 2
					this.getRechargeRecord()
				}
				if (index == 2) {
					this.params.status = 3
					this.getRechargeRecord()
				}
				if (index == 3) {
					this.params.status = 4
					this.getRechargeRecord()
				}
				if (index == 4) {
					this.query.type = 1
					this.getWalletFlowRecord()
				}
				if (index == 5) {
					this.query.type = 2
					this.getWalletFlowRecord()
				}

			},
			onFlowChange(e) {
				this.query.type = Number(e.detail.value) + 1
				this.getWalletFlowRecord()
			},
			onTypeChange(e) {
				this.params.page = 1;
				this.params.status = '';
				this.query.page = 1;
				this.query.type = '';
				if (e.detail.value == 0) {
					this.status = 0;
					this.title = "充值记录";
					this.getRechargeRecord()
				}
				if (e.detail.value == 1) {
					this.status = 1;
					this.title = "钱包流水";
					this.getWalletFlowRecord()
				}
			},
			recharge() {
				uni.navigateTo({
					url: "/pagesUser/recharge/recharge"
				})
			},
			getRechargeRecord() {
				getRechargeRecord(this.params).then(res => {
					this.isFlowEmpty = false
					if (res.code == 200) {
						if (res.data.total == 0) {
							this.isEmpty = true
						} else {
							this.isEmpty = false
						}
						this.totalCount = res.data.total
						if (this.params.page === 1) {
							this.recordList = res.data.list
						} else {
							this.recordList = this.recordList.concat(res.data.list);
						}
					}
				})
			},
			getWalletFlowRecord() {
				getWalletFlowRecord(this.query).then(res => {
					if (res.code == 200) {
						this.isEmpty = false
						if (res.data.length == 0) {
							this.isFlowEmpty = true
						} else {
							this.isFlowEmpty = false
						}
						this.flowTotalCount = res.data.total
						if (this.query.page === 1) {
							this.flowList = res.data.list
						} else {
							this.flowList = this.flowList.concat(res.data.list);
						}
					}
				})
			},
			loadMore() {
				if (this.params.page * this.params.page_size >= this.totalCount) {
					return;
				}
				this.params.page++;
				this.getRechargeRecord();
			},
			flowLoadMore() {
				if (this.query.page * this.query.page_size >= this.flowTotalCount) {
					return;
				}
				this.query.page++;
				this.getWalletFlowRecord();
			},
			getInfo() {
				getInfo().then(res => {
					if (res.code == 200) {
						this.now_money = res.data.now_money / 100
					}
				})
			}
		},
		onLoad() {
			this.getRechargeRecord()
		},
		onShow() {
			this.getInfo()
		}
	};
</script>

<style lang="scss">
	.wallet-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.balance-card {
			width: 675rpx;
			height: 246rpx;
			margin: 0 auto;
			background: #4d6aff;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			color: #fff;
			margin: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.balance-info {
				display: flex;
				flex-direction: column;
				margin-left: 60rpx;

				.balance-label {
					font-weight: 400;
					font-size: 33rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.balance-amount {
					font-size: 48rpx;
					font-weight: bold;
				}
			}

			.recharge-btn {
				margin-right: 60rpx;

				button {
					width: 152rpx;
					height: 78rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 49rpx 49rpx 49rpx 49rpx;
					border: 2rpx solid #FFFFFF;
					font-weight: 400;
					font-size: 33rpx;
					color: #FFFFFF;
				}
			}
		}

		.center {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.section-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				padding: 16rpx;
				border-bottom: 1rpx solid #eee;
			}

			.filter-bar {
				display: flex;
				align-items: center;
				padding: 10rpx 20rpx;

				.filter-label {
					font-size: 24rpx;
					margin-right: 6rpx;
				}
			}
		}

		.printer-list {
			width: 95%;
			padding: 20rpx;
			margin-top: 15rpx;

			.printer-item {
				background-color: #fff;
				border-radius: 9rpx;
				box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(0, 0, 0, 0.08);
				margin-bottom: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;

				.left {
					.header {
						display: flex;
						align-items: center;

						.status {
							font-size: 26rpx;
							color: #333333;
							font-weight: 500;
						}

						.user-type {
							padding: 10rpx 20rpx;
							background: #f7f8fc;
							border-radius: 30rpx;
							text-align: center;
							color: #586595;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}

					.orderId {
						color: #a9a9a9;
						font-size: 24rpx;
						margin-top: 10rpx;
					}

					.time {
						color: #a9a9a9;
						font-size: 24rpx;
						margin-top: 10rpx;
					}
				}

				.right {
					font-size: 30rpx;
					color: #333333;
					font-weight: 600;
				}
			}
		}

		.empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 200rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-size: 24rpx;
			}
		}
	}
</style>